<!-- 商品选择弹出窗 -->
<template>
	<div>
		<el-dialog title="优惠券选择" v-model="state.isShowDialog" center class="borderRadius10" width="1420">
            <section  class="pageQueryBoxArea">
				<el-form :inline="true">
					<el-form-item label="类型：">
						<el-select v-model="state.param.couponBaseType" placeholder="请选择类型" clearable>
							<el-option label="全部" :value="null" />
							<el-option label="满减券" :value="0" />
							<el-option label="折扣券" :value="1" />
						</el-select>
					</el-form-item>
					<el-form-item label="适用范围：">
						<el-select v-model="state.param.couponUseType" placeholder="请选择用范围" clearable>
							<el-option label="全部" :value="null" />
							<el-option label="全场通用" :value="1" />
							<el-option label="商品券" :value="2" />
							<el-option label="品类券" :value="3" />
							<el-option label="分类券" :value="3" />
							<el-option label="品牌券" :value="3" />
						</el-select>
					</el-form-item>
					<el-form-item label="领取方式：">
						<el-select v-model="state.param.couponType" placeholder="请选择用范围" clearable>
							<el-option label="全部" :value="null" />
							<el-option label="手动领取" :value="1" />
							<el-option label="新人券" :value="2" />
							<el-option label="赠送券" :value="3" />
						</el-select>
					</el-form-item>
					<el-form-item label="信息搜索：">
						<el-input class="width160" placeholder="请输入" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getGoodsList()">
							<el-icon> <ele-Search /> </el-icon> 搜 索
						</el-button>
					</el-form-item>
				</el-form>
            </section>

			<div class="cropper-warp" v-if="props.isMultiSelect">
				<el-table border ref="goodSkuListRef" v-loading="state.loading" :data="state.goodsListData" row-key="id"
					@selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" />
					<el-table-column label="ID" prop="skuId" width="90" />
                    <el-table-column prop="couponName" label="优惠券名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="couponBaseTypeName" label="优惠券类型" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="couponUseTypeName" label="适用范围" show-overflow-tooltip></el-table-column>
                    <el-table-column label="面值" show-overflow-tooltip>
                        <template #default="scope">
                            <span>￥{{ scope.row.couponValue }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发放数量">
                        <template #default="scope">
                            <span>{{ scope.row.couponIsLimited == 0 ? '不限量' : scope.row.couponTotal }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="已领取">
                        <template #default="scope">
                            <span>{{ scope.row.couponReceiveTotal }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="剩余数量">
                        <template #default="scope">
                            <span>{{ scope.row.couponIsLimited == 0 ? '不限量' : scope.row.couponLastTotal }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="使用率" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="couponTypeName" label="领取方式" show-overflow-tooltip></el-table-column>
                    <el-table-column label="创建时间">
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.createdTime), 'YYYY-mm-dd') }}</span>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <el-empty description="暂无数据" />
                    </template>
				</el-table>
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
							:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
							v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
							:total="state.total">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
			<div class="cropper-warp singleChoice" v-else> 
				<el-table border ref="goodSkuListRef" v-loading="state.loading" :data="state.goodsListData" row-key="id"
					@selection-change="handleSelectionChange" @select="selectClick">
					<el-table-column type="selection" width="50" />
					<el-table-column label="ID" prop="skuId" width="90" />
                    <el-table-column prop="couponName" label="优惠券名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="couponBaseTypeName" label="优惠券类型" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="couponUseTypeName" label="适用范围" show-overflow-tooltip></el-table-column>
                    <el-table-column label="面值" show-overflow-tooltip>
                        <template #default="scope">
                            <span>￥{{ scope.row.couponValue }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="发放数量">
                        <template #default="scope">
                            <span>{{ scope.row.couponIsLimited == 0 ? '不限量' : scope.row.couponTotal }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="已领取">
                        <template #default="scope">
                            <span>{{ scope.row.couponReceiveTotal }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="剩余数量">
                        <template #default="scope">
                            <span>{{ scope.row.couponIsLimited == 0 ? '不限量' : scope.row.couponLastTotal }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="使用率" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="couponTypeName" label="领取方式" show-overflow-tooltip></el-table-column>
                    <el-table-column label="创建时间">
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.createdTime), 'YYYY-mm-dd') }}</span>
                        </template>
                    </el-table-column>
				</el-table>
				<el-row justify="end">
					<el-col :span="24" class="flex-end-center">
						<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
							:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
							v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
							:total="state.total">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, nextTick, ref } from 'vue';
import { productList } from '/@/api/commodity';
import { formatDate } from '/@/utils/formatTime';
import { couponStatistics, couponList, couponStatus, couponDelete } from '/@/api/marketing';
const emit = defineEmits(['couponSubmitFun'])
const goodSkuListRef = ref()
// 定义变量内容
const props = defineProps({
	// 是否多选
	isMultiSelect: {
		type: Boolean,
		default: () => true,
	},
});

const state = reactive({
	isShowDialog: false,
	loading:false,
    param: {
		showType:1,
		searchType : 1,
		keyword: "",
		pageNum: 1,
		pageSize: 10,  
	},
	query:{
		showTypeList: [
			{ value: 0, label: 'SPU列表' },
			{ value: 1, label: 'SKU列表' }
		],
	},
    total: 0,
    goodsListData: [],
	selectList: [] as Array<any>,
});

// 打开弹窗
const openDialog = () => {
	state.isShowDialog = true;
	nextTick(() => {
		getGoodsList();
	});
};

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 更换
const getGoodsList = async() => {
	state.loading = true;
	let params = {
		pageNum: state.param.pageNum,
		pageSize: state.param.pageSize,
	}
	const { results } = await couponList(params);
	state.goodsListData = results.records;
	state.loading = false;
	state.total = results.total;
};

// 分页点击条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
    getGoodsList();
};

// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
    getGoodsList();
};

// 控制单选——table选择项发生变化时
const selectClick = (selection :any) => {
  if (selection.length > 1) {
    let del_row = selection.shift();
    goodSkuListRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
  }
}

// 商品选中
const handleSelectionChange = (val:any) =>{
	if(!props.isMultiSelect){
		// 清除之前的选择
	}
	let arr = val.map((item: any) => {
		let isFind = state.selectList.find((x:any) => x.id === item.id)

		return { ...item, 
			handselNumber: isFind== undefined ?  1 : isFind.handselNumber, 
			customPrice:0.00
		};  
	})
	state.selectList = arr
}

// 确认
const onSubmit = () => {
	if(!props.isMultiSelect){
		if(state.selectList.length > 1){
			return
		}
	}
	emit('couponSubmitFun',  state.selectList);
	state.isShowDialog = false;
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
.pageQueryBoxArea{
	:deep(.el-select){
		.el-input {
			width: 160px !important;
			height: 38px;
			line-height: 38px;
		}
	}
}

.singleChoice{
	:deep(.el-table th.el-table__cell:nth-child(1) .cell ){
		visibility: hidden;
	}
}
</style>
